<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./public.css">
    <style>
        body {
            background-color: #27c9fb;
        }

        .box {
            width: 20rem;
            height: 20rem;
            border: 0.1rem solid #fff;
            /* margin: auto; */
            z-index: 10;
            background-color: transparent;
            position: relative;
            top: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            padding: 1rem;
        }

        .box .box-1 {
            width: 100%;
            height: 6rem;
            border-radius: 2rem;
            overflow: hidden;
        }

        .box>div img {
            width: 100%;
            height: 100%;
        }

        .box .box-2 {
            width: 100%;
            height: 3rem;
            line-height: 2rem;
            font-size: 2rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
            border-radius: 2rem;
            overflow: hidden;
        }

        input {
            width: 100%;
            line-height: 3rem;
            border: none;
            font-size: 1rem;
            outline: none;
        }

        .dogo {
            width: 3rem;
            height: 3rem;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: rotateY(180deg);
            /* transition: all 1s; */
        }

        .dogo img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-1">
            <img src="./image/9e3ecd5aa70bc74be0ec479a5f4efe5.png" alt="请登录">
        </div>
        <div class="box-2">
            <input type="text" placeholder="请输入账号" value="" />
        </div>
        <div class="box-2" style="margin:0">
            <input type="password" placeholder="请输入密码" />
        </div>
    </div>
    <div class="dogo">
        <img src="./image/74faa3cc8cd5654a02a1aa830bb24fb9.gif" />
    </div>
    <script src="./jquery.js"></script>
    <script>
        var indexdata = [
            {
                "王一茗": {
                    password: "123456789"
                }
            }
        ]

        // 测试密码和账号输入
        var ty=0
        $('.box-2').eq(1).on('input', function (e) {
          
            if(ty==0){
            let tyx=setTimeout(() => {
                // console.dir($('.box-2 input').eq(0).val())
                var input0=$('.box-2 input').eq(0).val()
                for(let i=0;i<indexdata.length;i++){
                    for(let data in indexdata[i]){
                        console.log(data)
                        if(input0!==data){
                            $('.box-2 input').eq(0).val('请输入正确账号')
                            $('.box-2 input').eq(0).css('color',"red")
                        }else{
                            // console.log(indexdata[i][data].password)
                         var input1=$('.box-2 input').eq(1).val()
                         if(input1!==indexdata[i][data].password){
                            $('.box-2 input').eq(1).css('color',"red")
                         }else{
                            $('.box-2 input').eq(1).css('color',"#000")
                         window.location.href='./public/home.html'
                         }
                        }
                    }
                }
                ty=0
                console.log(ty)
            }, 1000)
            }
            ty++
        })
        var ty = 0;
        var tx = 0
        $(document).on('click', function (e) {
            if (e.target.localName == 'html') {
                // console.dir($('.dogo')[0])
                // 计算小狗趴的高度
                $('.dogo').css({ 'bottom': ty, 'left': tx })
                console.log(ty)
                //浏览器的高度
                var llq = $(window).height() - $('.dogo')[0].offsetHeight
                //   拿到小狗当前的位置
                var dogotop = $('.dogo')[0].offsetTop
                var dogoLeft = $('.dogo')[0].offsetLeft
                //   鼠标点击的高度
                var sbiao = $(window).height() - e.pageY - ($('.dogo')[0].offsetHeight / 2)
                // 鼠标点击之后距离左边框的位置
                var sbiaoX = e.pageX - ($('.dogo')[0].offsetWidth / 2)
                // console.log(sbiaoX)
                // 当狗狗没有动的时候
                if ($('.dogo')[0].offsetTop == llq && $('.dogo')[0].offsetLeft == 0) {
                    let set = setInterval(() => {
                        ty++
                        $('.dogo').css('bottom', ty)
                        if (ty == sbiao || ty > sbiao) {
                            ty = sbiao
                            tx++
                            $('.dogo').css({ 'bottom': ty, 'left': tx })
                            if (tx == e.pageX) {
                                clearInterval(set)
                            }
                        }
                    }, 1)
                } else {
                    console.log(ty)
                    var data = sbiao - ty
                    var datax = sbiaoX - tx
                    console.log(data, datax)
                    var tyx = 0
                    let sety = setInterval(() => {
                        if (data < 0) {
                            tyx--
                            ty--
                            if (tyx <= data) {
                                tyx = data
                                clearInterval(sety)
                                fun()
                            }
                            $('.dogo').css({ 'bottom': ty })
                        } else {
                            tyx++
                            ty++
                            if (tyx >= data) {
                                tyx = data
                                clearInterval(sety)
                                fun()
                            }
                            $('.dogo').css({ 'bottom': ty })
                        }
                    }, 1)
                    function fun() {
                        var tyt = 0
                        let seyx = setInterval(() => {
                            if (datax > 0) {
                                tx++
                                tyt++
                                if (tyt >= datax) {
                                    tyt = datax
                                    clearInterval(seyx)
                                }
                                $('.dogo').css({ 'left': tx })
                            } else {
                                tx--
                                tyt--
                                if (tyt <= datax) {
                                    tyt = datax
                                    clearInterval(seyx)
                                }
                                $('.dogo').css({ 'left': tx })
                            }
                        }, 1)
                    }
                }
            }
        })
    </script>
</body>

</html>